// 定义一个轮播图类
class Carousel {
  constructor(tag) {
    // 获取目标元素
    this.tag = document.querySelector(tag);
    // 获取左右点击按钮
    this.lBtn = this.tag.querySelector(".l_btn");
    this.rBtn = this.tag.querySelector(".r_btn");
    // 获取小圆点
    this.dot = this.tag.querySelectorAll(".dot_box > span")
    // 获取li列表
    this.lists = this.tag.querySelectorAll(".img_box > ul > li");

    // 获取所有li要移动的类名
    this.listClassName = ["list01", "list02", "list03", "list04"];
    // 触发绑定事件
    this.eventFn();
    // 初始化变量
    this.index = 0;
    // 获取上一个初始化变量
    this.lastIndex = 0;

    // 自动轮播
    setInterval(() => {
      this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
      this.listClassName.pop();
      // li全部重新设置类名
      this.resetListFn();
    }, 1500)
  }
  // li重新设置类名 
  resetListFn() {
    this.lists.forEach((item, idx) => {
      item.className = this.listClassName[idx]
    })
  }

  // 点击事件
  eventFn() {
    // 右箭头点击事件
    this.rBtn.addEventListener("click", () => {
      // 操作数组
      // 将最后一个值添加到第一个
      this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
      this.listClassName.pop();

      // li全部重新设置类名
      this.resetListFn();
      console.log(this.listClassName);




      // //操作完成之后重新赋值
      // this.lastIndex = this.index;
      // // 下标自增
      // this.index++;
      // // index最大值
      // if (this.index == this.listClassName.length) {
      //   this.index = 0;
      // };

      // // 去除当前li类名
      // this.lists[this.lastIndex].remove(this.listClassName[this.lastIndex])
      // // 添加类名index
      // this.lists[this.index].classList.add(this.listClassName[this.index])
    });

    // 左箭头点击事件
    this.lBtn.addEventListener("click", () => {
      // this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
      // this.listClassName.shift();

      // 操作数组
      // 往数组的最后添加第一个值
      this.listClassName.push(this.listClassName[0]);
      // 删除数组的第一个值
      this.listClassName.shift();
      // li全部重新设置类名
      this.resetListFn();

      // console.log(this.listClassName);
    })

    //小圆点事件
    this.dot.forEach((item, idx) => {

      item.addEventListener("click", () => {
        // 小圆点颜色跟随
        this.dot[this.lastIndex].classList.remove("dot_active");
        this.lastIndex = idx;
        item.classList.add("dot_active")

        // // 小圆点切换轮播
        // // 当点击小圆点的时候，它下标idx所对应的图片，转换为数组的第二张listClassName[1]
        // this.listClassName.splice(1, 0, this.listClassName[idx]);
        // // this.listClassName.push(this.listClassName[idx])
        // // this.listClassName.shift()
        // let newArr = this.listClassName;
        // newArr.splice[2, 1]
        // // console.log(newArr);
        // // this.listClassName = [];
        // // this.listClassName = newArr;
        // // newArr=[]
        // // console.log(this.listClassName[idx]);


        // this.resetListFn();
        // // this.listClassName.push(this.listClassName[0])
        // // this.listClassName.shift();

        // console.log(this.listClassName);

      })
    })
  }
};






